<script setup lang="ts">
import { onMounted, ref } from "vue";
import { GameManager } from "./gameManager";
import { LocalStorageManager } from "./storageManager";
import { HTMLActuator } from "./htmlActuator";
import { InputManager } from "./inputManager";

const gameManager = ref<any>();
const scoreRef = ref();
const timeRef = ref();
const overRef = ref();
const tileRef = ref();

onMounted(() => {
  const inputManager = new InputManager(); //初始化输出操作事件管理器（点击）
  const storage = new LocalStorageManager(); //初始化存储管理器,存分数和最好分数
  const htmlActuator = new HTMLActuator(
    tileRef.value,
    scoreRef.value,
    timeRef.value,
    overRef.value
  );
  gameManager.value = new GameManager(inputManager, htmlActuator, storage);
});
</script>

<template>
  <div class="container flex-center flex-col">
    <div ref="scoreRef" class="score-container"></div>
    <div ref="timeRef" class="time-container"></div>
    <div ref="overRef" class="over-container"></div>
    <!-- <div
      @click="gameManager?.updateIsRemove(true)"
      style="margin-right: 20px; margin-bottom: 10px; background-color: pink"
    >
      开始消除
    </div> -->
    <div class="game-box">
      <div ref="tileRef" class="tile-container"></div>
    </div>
  </div>
</template>
<style lang="less" src="./candyCrush.less"></style>